<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>毕业答辩</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css" media="all">
    <style>
        .layui-form-item {
            margin-top: 30px;
        }

        .layui-unselect dl dd {
            color: black;
        }
    </style>
</head>
<body class="layui-bg-black">
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md6 layui-col-md-offset3 layui-bg-black" style="height: 300px;">
            <form class="layui-form" action="" method="post">


                <div class="layui-form-item">
                    <label class="layui-form-label">所属题目ID</label>
                    <div class="layui-input-block">
                        <select class="layui-input" id="tid" name="Topic.tid" lay-ignore>
                            <option selected disabled>--------------------------------请选择---------------------------------</option>
                        </select>
                    </div>

                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">选项</label>
                    <div class="layui-input-block">
                        <select class="layui-input" id="chose" name="Chose.answer" lay-ignore>
                            <option selected disabled>--------------------------------请选择---------------------------------</option>
                        </select>
                    </div>

                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">答案</label>
                    <div class="layui-input-block">
                        <input type="text" name="result" id="result" class="layui-input" readonly="readonly"
                               lay-verify="required" autocomplete="off"/>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="addAnswer">添加</button>
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>
<script src="../static/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../static/layui/layui.js"></script>
<script>
    layui.use(['form', 'layer'], function () {
        var form = layui.form;
        var layer = layui.layer;
        //第一个实例
        form.render('select');
        $(function () {
           $.get("/school_project/topic/selectAllTopic",function (res) {
               console.log(res)
               for (var i=0;i<res.length;i++){
                   $("#tid").append("<option value'"+res[i].tid+"'>"+res[i].tid+"</option>");
               }
           });
           $("#tid").change(function () {
               var index=$(this).val();
               console.info(index);
               $.get('/school_project/choose/selectChooseByTid',{tid:index},function (res) {
                   console.info(res);
                   console.info(res);
                   $('#chose').empty();
                   for (var i=0;i<res.length;i++){
                       $('#chose').append('<option value="' + res[i].chooseId + '">' + res[i].answer + '</option>')
                   }
               });
           });
           $("#chose").change(function () {
               console.log("下拉框列表事件")
               var index=$(this).val();
                console.info(index)
               $.get('/school_project/choose/selectAnswerByChooseId', {'chooseId': index}, function (res) {
                   console.info(res)
                   $('#result').val(res.answer);
               }, 'json');
           });
            form.on('submit(addAnswer)', function (data) {
                console.info(data.field)
                $.post('/school_project/answer/insertAnswer', data.field, function () {
                    layer.confirm("<span style='color: green'>添加成功</span>", function () {
                        window.location.reload();
                    });
                }, 'json');
                return false;
            });
       });
    });



</script>
</body>
</html>
